// const theme = {}

const Card = ({
  className,
  title,
  titleClassName,
  itemColor,
  textColor,
  list = []
}) => {
  const headers = [
    { title: "问题方面", key: "label" },
    { title: "问题数", key: "count" },
    { title: "相比同类单位", key: "compare" }
  ]

  if (!list || list.length === 0) return null

  const renderPercent = (item) => {
    const { higherPercentage = 0, lowerPercentage = 0 } = item
    if (higherPercentage > 0) return `高+${higherPercentage}百分点`
    if (lowerPercentage > 0) return `低-${lowerPercentage}百分点`
    return "正常"
  }

  return (
    <div className={className}>
      <header
        className={`flex justify-between py-2 px-4 text-white font-bold ${titleClassName}`}
      >
        <span>{title}</span>
        <span>更多&gt;&gt;</span>
      </header>
      <main className="text-sm">
        <div className="flex justify-between bg-white px-6 py-3">
          {headers.map((item) => (
            <div key={item.key}>{item.title}-{item.key}</div>
          ))}
        </div>
        {list.map((item, index) => (
          <div
            key={index}
            className={`flex justify-between px-6 py-3 ${
              index % 2 === 0 ? itemColor : "bg-white"
            }`}
          >
            <div className="flex-1">{item.aspectName}</div>
            <div className={`flex-1 text-center font-bold ${textColor}`}>
              {item.count}
            </div>
            <div className="flex-1 text-right">
              <span className={`${textColor} font-bold`}>
                {renderPercent(item)}
              </span>
              {/* <span className="px-2 py-1 rounded-2xl border-2 border-green-500, text-green-500">{item.compare}</span> */}
            </div>
          </div>
        ))}
      </main>
    </div>
  )
}

export default Card
